
<template>
  <el-tabs type="border-card" class="student-tabs" v-model="activeTab" @tab-click="handleChangeTab">
    <el-tab-pane label="考勤详情" name="attendanceDetail">
      <StudentAttendanceDetail />
    </el-tab-pane>
    <el-tab-pane label="成绩详情" name="scoreDetail">
      <StudentScoreDetail />
    </el-tab-pane>
    <el-tab-pane label="面试详情" name="interviewDetail">
      <StudentInterviewDetail />
    </el-tab-pane>
    <el-tab-pane label="就业详情" name="employmentDetail">
      <StudentEmploymentDetail />
    </el-tab-pane>
  </el-tabs>
</template>

<script  setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import StudentAttendanceDetail from "@/components/student/StudentAttendanceDetail.vue";
import StudentInterviewDetail from "@/components/student/StudentInterviewDetail.vue";
import StudentEmploymentDetail from "@/components/student/StudentEmploymentDetail.vue";
import StudentScoreDetail from "@/components/student/StudentScoreDetail.vue";
import EventBus from "@/plugins/event-bus";
const route = useRoute();
const activeTab = ref('attendanceDetail')
const studentId = ref()

onMounted(() => {
  studentId.value = route.params.studentId
})

const handleChangeTab = (tab) => {
  let eventName = "show-student-" + tab.paneName + "-info-event"
  EventBus.emit(eventName, {'studentId': studentId.value})
}

</script>

<style>
.student-tabs {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
  }
}
</style>